$(function () {
    // alert(11);
    // 1. 按下回车 把完整数据 存储到本地存储里面
    // 存储的数据格式  var todolist = [{title: "xxx", done: false}]
    $("#title").on("keydown", function (event) {
        if (event.keyCode == 13) {
            // 输入值不可为空
            if ($(this).val() == "") {
                alert("请输入正确的待办事项")
            } else {
                // 判断用户按下时是否为enter这个键  是则执行
                // 读取本地存储的原来的数据  local是原本的本地存储数据获取后 进行添加的值  data是后续获取的本地存储数据
                var local = getDate();
                // 把local数组进行更新数据  把最新的数据追加给获取到的 数组  以对象形式追加.原本数组中就是对象
                local.push({
                    //表单中用户输入的值  按enter后保存 添加
                    title: $(this).val(),
                    //复选框是否选中  刚添加 为false
                    done: false
                });
                // 把数组local 重新保存到内存中
                saveDate(local);
                //把本地存储数据 渲染加载到页面
                load();
                // 完成后 input的值为空
                $(this).val("");
            };
        };

    });

    //3. 点击a删除数据 重新 渲染页面 动态生成的  利用on 处理程序
    $("ol, ul").on("click", "a", function () {
        // 先获取数据
        var data = getDate();
        // 修改数据数据
        // 先得到点击的a 的索引号 根据索引号删除对应获取数据中的数组元素 创建a的时候 设置自定义属性值为做索引号
        // console.log($(this).attr("id"));
        index = $(this).attr("id");
        // splice(i,num) i为从哪里删除 num为删除几个数据
        data.splice(index, 1);
        // 保存新数据 到本地 才可以更新存储
        saveDate(data);
        // 重新渲染页面
        load();
    });

    //4. todolist 正在进行ol(复选框为false) 和 已完成ul(复选框为true) 选项操作 
    // 点击之后 获取数据
    $("ol, ul").on("click", "input", function () {
        var data = getDate();
        // 修改对应数据属性done 为当前复选框的checked的状态
        // 1.点击的复选框 与a兄弟关系 得到a的索引  也就是对应 input的索引
        var index = $(this).siblings("a").attr("id");
        // 2.data[索引号]为对应的对象  里面的done的值为点击的那个input选中的状态
        data[index].done = $(this).prop("checked")
        // data是数组 里面的元素是对象 数组data中第index个对象的done的值
        // 保存数据 到本地存储
        saveDate(data);
        // 重新渲染页面 加载数据
        load();
        // 去到添加数据的代码块中 对done的值加以判断后 对应的添加到ol 或者ul中

    })

    //1. 读取本地存储的数据 
    function getDate() {
        // 利用变量 保存获取的值
        var data = localStorage.getItem("todolist");
        // 加判断 如果返回的是空则表示本地没有数据,那获取之后 利用数组的push添加回报错
        // 返回的是 JSON字符串  再转化
        if (data !== null) {
            return JSON.parse(data);
        } else {
            return [];
        }

    }

    //2. 保存本地存储的数据   date形参用来接收  新保存的数据local
    function saveDate(data) {
        // 注意把对象转化为JSON字符串保存
        localStorage.setItem("todolist", JSON.stringify(data));
    }
    //3. 渲染加载数据
    function load() {
        // 读取本地存储数据
        var data = getDate();
        // 遍历数据之前先清空ol ul中的所有内容
        $("ol, ul").empty();
        var todoCount = 0; //正在进行的个数
        var doneCount = 0; //已经完成的个数

        // 遍历数据$.each    $("元素").each(function(index,ele){}),遍历元素
        $.each(data, function (i, n) {
            // 添加到ol最前面
            //     $("ol").prepend($(`<li>
            //     <input type="checkbox">
            //     <p>${n.title}</p>
            //     <a href="javascript:;" id=${i}></a>
            // </li>`));
            //i为索引号  n为data数组中的每一个对象,对象中的值 n.属性名=对应的 值
            // / i为索引号 n为值
            //index=${i}给每一个a 指定自定义属性索引号
            // 有多少个数据则添加多少个li到ol中 反引号n.title 对象中的属性的属性值

            // 加判断 如果n.done的值为true 则添加到ul中  否则添加到ol中
            // ul中的input为选中状态
            if (n.done) {
                $("ul").prepend($(`<li>
                <input type="checkbox" checked>
                <p>${n.title}</p>
                <a href="javascript:;" id=${i}></a>
            </li>`));
                doneCount++;
            } else {
                $("ol").prepend($(`<li>
                <input type="checkbox">
                <p>${n.title}</p>
                <a href="javascript:;" id=${i}></a>
            </li>`));
                todoCount++;
            }
        });
        $("#todocount").html(todoCount);
        $("#donecount").html(doneCount);

    };
})